<template>
    <div id="app">
        <transition name="el-fade-in-linear" mode="out-in">
          <router-view></router-view>
        </transition>
    </div>
</template>
<script>
  export default {
    name: 'app',
    data() {
      return {
        homeFlag: true,
        backFlag: false,
        scoreFlag: false
      }
    },
    methods: {
      backToHome() {
        this.$store.commit('resetStore')
        this.$router.push('/')
      },
    },
    created() {
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
      }
      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("store", JSON.stringify(this.$store.state))
      })
    },
    mounted() {
      if (this.$route.path === '/') {
        this.homeFlag = true
        this.backFlag = false
        this.scoreFlag = false
      } else if (this.$route.path === '/question') {
        this.homeFlag = false
        this.backFlag = true
        this.scoreFlag = false
      } else if (this.$route.path === '/score') {
        this.homeFlag = false
        this.backFlag = false
        this.scoreFlag = true
      }
    },
    watch: {
      $route: {
        handler: function (val, oldVal) {
          if (val.fullPath === '/') {
            this.homeFlag = true
            this.backFlag = false
            this.scoreFlag = false
          } else if (val.fullPath === '/question') {
            this.homeFlag = false
            this.backFlag = true
            this.scoreFlag = false
          } else if (val.fullPath === '/score') {
            this.homeFlag = false
            this.backFlag = false
            this.scoreFlag = true
          }

        },
        // 深度观察监听
        deep: true
      }
    }

  }
</script>

<style>
    @import "./assets/css/main.css";
    @import "./assets/css/color-dark.css";     /*深色主题*/
    /*@import "./assets/css/theme-green/color-green.css";   浅绿色主题*/
</style>